<template>
<el-table :data="data">
  <el-table-column width="80px" label="ID" prop="id" />
  <el-table-column width="200px" label="所属博客" prop="blog.title" />
  <el-table-column label="评论内容" prop="content" />
  <el-table-column width="120px" label="评论用户" prop="username" />
  <el-table-column width="80px" label="注册用户">
    <template #default="scope">
      <el-tag size="small">-</el-tag>
    </template>
  </el-table-column>
  <el-table-column width="80px" label="状态">
    <template #default="scope">
      <el-tag size="small" :type="scope.row.visible ? 'success' : 'warning'">
        {{scope.row.visible ? '已发布' : '待审核'}}
      </el-tag>
    </template>
  </el-table-column>
  <el-table-column width="200px" label="操作">
    <template #default="scope">
      <el-link type="primary" v-if="!scope.row.visible" @click="apply(scope.row)">发布</el-link>
      <el-link type="danger" @click="del(scope.row.id)">删除</el-link>
    </template>
  </el-table-column>
</el-table>
</template>

<script setup>
import {ElMessage, ElMessageBox} from "element-plus";
import {request} from "../../../api/baseFentch";

const props = defineProps({
  data: {
    type: Array,
    require: true,
    default: []
  }
})

const emit = defineEmits(['update'])

const apply = async reply => {
  if (reply.visible) {
    ElMessage.warning("此条评论已经发布")
    return
  }
  const result = await request(`/blog/reply/apply/${reply.id}`, "POST");
  if (result.code === 0) {
    ElMessage.success('发布成功')
    emit('update')
    return
  }
  ElMessage.error("发布失败, 原因: " + result.msg)
}

const del = async id => {
  ElMessageBox.confirm("您确定要删除评论[]吗?", "提示").then(async () => {
    const result = await request("/blog/reply/" + id, "DELETE")
    if (result.code === 0) {
      ElMessage.success("删除成功")
      emit("update")
      return
    }
    ElMessage.error("删除失败, 原因: " + result.msg)
  })
}
</script>

<style scoped>
.el-link {
  margin-right: 10px;
}
</style>